<template>
  <view class="form">
    <uni-forms :model="form" ref="formRef">
      <view class="form-item" v-for="(item, index) in form" :key="index">
        <view style="padding: 20rpx">
          <uni-forms-item label="日期" required :rules="[{ required: true, errorMessage: '日期必填' }]"
            :name="[index, 'creatTime']">
            <uni-datetime-picker type="date" v-model="item.creatTime" border="none"></uni-datetime-picker>
          </uni-forms-item>
          <uni-forms-item label="型号" required :rules="[{ required: true, errorMessage: '型号必填' }]"
            :name="[index, 'modelName']">
            <uni-easyinput v-model="item.modelName" border="none"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="数量" required :rules="[{ required: true, errorMessage: '数量必填' }]"
            :name="[index, 'number']">
            <uni-easyinput v-model="item.number" type="digit" border="none"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="单价" required :rules="[{ required: true, errorMessage: '单价必填' }]"
            :name="[index, 'price']">
            <uni-easyinput v-model="item.price" type="digit" border="none"></uni-easyinput>
          </uni-forms-item>
        </view>
        <view v-if="!id" class="button-item">
          <view v-if="form.length > 1" class="btn cancel-btn" @click="rowDel(item)"> 删除 </view>
          <view v-if="index === form.length - 1" class="btn confirm-btn" @click="addRow"> 新增 </view>
        </view>
      </view>
    </uni-forms>
  </view>
  <view class="bottom-placeholder"> </view>
  <view class="bottom button" @click="submit" type="primary" :loading="loading">提交</view>
</template>

<script setup>
import { ref } from 'vue';
import { addAccount, updateAccount, getAccountDetail } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import moment from 'moment';

const form = ref([]);
const loading = ref(false);
const id = ref(undefined);
const formRef = ref(null);

function addRow() {
  form.value.push({ creatTime: moment().format('YYYY-MM-DD') });
}

function rowDel(item) {
  form.value.splice(form.value.indexOf(item), 1);
  uni.showToast({
    title: '删除成功',
    icon: 'none',
  });
  if (form.value.length == 0) {
    addRow();
  }
}

async function submit() {
  await formRef.value.validate();
  loading.value = true;
  try {
    if (id.value) {
      await updateAccount(form.value[0]);
    } else {
      await addAccount(form.value);
    }
  } catch (e) {
    //
  }
  loading.value = false;

  uni.showToast({
    title: '提交成功',
    icon: 'none',
  });
  setTimeout(() => {
    uni.navigateBack();
  }, 1000);
}
async function initData() {
  if (id.value) {
    const res = await getAccountDetail({ _id: id.value });
    form.value = [res.data];
  } else {
    form.value = [];
    addRow();
  }
}
onLoad((options) => {
  id.value = options.id;
  initData();
  console.log(options);
});
</script>

<style lang="scss">
.form {
  padding: 20rpx;

  .form-item {
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;

    .button-item {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      height: 60rpx;

      .btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #fff;
      }

      .confirm-btn {
        background-color: #04b27c;
      }

      .cancel-btn {
        background-color: #e64340;
      }
    }
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 38px;
  color: #fff;
  background-color: #04b27c;
}

.bottom-placeholder {
  height: 100rpx;
}
</style>
